<html>
	<head>
		<title>Shoot</title>
		<script src="../gate/amplify.store.js"></script>
		<script src="../deps/jquery.js"></script>
		<!--
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script src="../gate/sock.js"></script>
		-->
		<script src="../deps/theory.js"></script>
		<script src="./shoot.js"></script>
		<style>
			html, body {
				font-family: Verdana, Geneva, sans-serif;
				font-size: 18pt;
			}
			#model {
				display: none;
			}
			.binary {
				font-family: Impact, Charcoal, sans-serif;
				color: #c0a343;
			}
			.number {
				font-family: "Courier New", Courier, monospace;
				color: #3975aa;
			}
			.text {
				font-family: "Times New Roman", Times, serif;
				quotes: "�" "�" "�" "�";
				color: #37a558;
			}
			.text:before {
				content: open-quote;
			}
			.text:after {
				content: close-quote;
			}
			li {
				list-style: none;
			}
			.on {
				list-style: inherit;
				border-bottom: 0.1em dashed #DDD;
			}
			.id {
				font-size: 1.2em;
			}
			.keyboard {
				font-size: 12pt;
			}
			.node {
				margin: 1.1em;
				f-loat: left;
				min-width: 250px;
			}
			.space {
				margin: 1.5em 0 0 1.5em;
			}
			.has > .key:after {
				content: ": ";
			}
			.ref > .key:after {
				content: "\2192";
			}
			.obj > .key:after {
				content: "...";
			}
		</style>
	  </head>
	</head>
	<body>
		<div class="id space">Loading...</div>
		<small><small>
			Warning: This is an incredibly buggy and unfinished demo, manually refreshing the page will be required.
			Please rely on the demo video if this breaks.
			Load <a href="http://gunjs.herokuapp.com/test/shoot.html">heroku</a> and <a href="http://gunjs-amark.rhcloud.com/test/shoot.html">openshift</a>,
			and make an edit on one (click on some text value, and modify it),
			then refresh the page on the other and it should be updated (despite these being run on two completely different servers).
		</small></small>
		<ul id="graph"></ul>
		<ul id="model">
			<li class="node field" id="model-node">
				<span class="id key">ID</span><ul class="sub"></ul>
			</li>
			<li class="has field" id="model-has">
				<span class="key">key</span><span class="val" contenteditable="true">val</span>
			</li>
			<li class="ref field" id="model-ref">
				<span class="key">key</span><a class="val" contenteditable="true" href="#">&rarr;</span>
			</li>
			<li class="obj field" id="model-obj">
				<span class="key">key</span><ul class="sub"></ul>
			</li>
		</ul>
	</body>
</html>